{% extends "base.html" %}


{% block title %}疫情防控系统-监控历史图片{% endblock %}


{% block style %}
    <style>
        img{
            width:auto;
            height:160px;
        }
    </style>
{% endblock %}


{% block content %}
<div id="my_container" class="container-fluid">
</div>
{% endblock %}


{% block script %}
<script>
    var id_camera = -1;

    function change_camera(value) {
        // console.log(value);
        $.get(
            "/api/capture/get_picture_cut",
            function (data, state) {
                // console.log(data[0].path);
                var str_all = "<div class='row'>";
                var str_tools = "";

                for(var i = 0; i < data.length; i++){
                    if(i%4 == 0 && i != 0){
                        str_tools+="</div><hr>";
                        str_all+=str_tools;
                        str_tools="<div class='row'>";
                    }
                    str_tools+="<div class='col-md-3'>\
                                    <img src='"+data[i].path+"' alt='...'>\
                                    <p>"+data[i].create_time+"</p>\
                                </div>";
                }

                document.getElementById("my_container").innerHTML = str_all;
            }
        );
    }
    change_camera(id_camera);
</script>
{% endblock %}